<?php

js_enqueue('lib/jquery-ui-1.8.11.custom.min');
function jd_favorite(){
	echo <<<JD_NAV
	<div class="demo">
<ul id="sortable">
	<li class="ui-state-default">1</li>
	<li class="ui-state-default">2</li>
	<li class="ui-state-default">3</li>
	<li class="ui-state-default">4</li>
	<li class="ui-state-default">5</li>
	<li class="ui-state-default">6</li>
	<li class="ui-state-default">7</li>
	<li class="ui-state-default">8</li>
	<li class="ui-state-default">9</li>
	<li class="ui-state-default">10</li>
	<li class="ui-state-default">11</li>
	<li class="ui-state-default">12</li>
</ul>

</div><!-- End demo -->
JD_NAV;
}
add_action('nav','jd_favorite');


function jd_favorite_js(){
	echo <<<JD_JS
	<script type="text/javascript">
		$(function() {
		$( ".wp-submenu li" ).draggable();
		$( "#sortable" ).droppable({
			accept: '.wp-submenu li',
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
JD_JS;
}
add_action('head','jd_favorite_js');


function jd_favorite_css(){
	echo <<<JD_CSS
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable li { border:1px solid blue; margin: 3px 3px 3px 3px; padding: 1px; float: left; width: 20px; height: 20px; font-size: 1.2em; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	</script>
JD_CSS;
}
add_action('head','jd_favorite_css');
?>